<template>
  <div>
    <el-card :body-style="{ padding: '15px' }">
      <div class="flex" style="justify-content: space-between">
        <div>
          <div class="jumpBtn" @click="jump">
            <IconifyIconOffline :icon="leftArrow" width="16px" height="16px" />
            <el-button type="" link>返回</el-button>
          </div>
        </div>
        <div>
          <el-button type="primary" @click="scan">扫描摄像头</el-button>
          <el-button @click="formFlag = true">手动添加</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; max-height: 740px; margin-top: 15px"
        :empty-text="customEmptyText"
      >
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="addx" label="onvif地址" />
        <el-table-column prop="uuid" label="uuid" />
        <el-table-column label="状态" width="180">
          <template #default="{ row }">
            <div v-if="row.exists">
              <div class="pass">已添加</div>
            </div>
            <div v-else>
              <div class="toBeTested" v-if="row.state === 'wait'">待检测</div>
              <div class="pass" v-if="row.state === 'pass'">检测通过</div>
              <div class="fail" v-if="row.state === 'reject'">检测不通过</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template #default="{ row }">
            <div
              class="detectBtn bg-lime-500"
              @click="addCamera(row)"
              v-if="row.detection"
            >
              新增摄像头
            </div>
            <div
              class="detectBtn"
              :style="{
                cursor: row.exists ? 'not-allowed' : 'pointer',
                background: row.exists ? '#9fceff' : '#409eff'
              }"
              @click="detection(row)"
              v-else
            >
              检测摄像头
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <form-pop-ups
      v-if="formFlag"
      @closePopUps="closePopUps"
      :formData="formData"
    />
    <detect-pop-ups
      :detectionData="detectionData"
      v-if="detectFlag"
      @closePopUps="detectPopUpsClose"
      @getDetectionData="getDetectionData"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive } from "vue";
import { useRouter } from "vue-router";
import leftArrow from "@iconify-icons/ri/arrow-left-line";
import formPopUps from "./components/formPopUps.vue";
import detectPopUps from "./components/detectPopUps.vue";
import { scanCamera, detectionCamera } from "@/api/camera";
import { RuleForm, detectionTable } from "@/type/camera";
import { ElMessage } from "element-plus";
const customEmptyText = ref<string>(
  "请点击右上角扫描摄像头按钮获取本地摄像头数据，如果未能成功获取所需摄像头，请手动添加。"
);
const tableData = ref<detectionTable[]>([]);
const router = useRouter();
const formFlag = ref<boolean>(false);
const detectFlag = ref<boolean>(false);
const index = ref<number | null>(null);
const detectionData = ref<detectionTable>();
const addCameraFormData = reactive<RuleForm[]>([]);
const formData = ref<RuleForm>();

const closePopUps = (val: string) => {
  formFlag.value = false;
  if (val) {
    const index = tableData.value.findIndex(item => {
      return item.uuid === val;
    });
    if (index > -1) {
      tableData.value[index].detection = false;
      tableData.value[index].exists = true;
    }
  }
  formData.value = null;
};

const scan = async () => {
  const res = await scanCamera();
  if (res.result.length === 0 || res.result === null) {
    ElMessage("未扫描到摄像头");
  } else {
    tableData.value = res.result;
    tableData.value.forEach(item => {
      item.state = "wait";
      item.detection = false;
    });
  }
};

const jump = () => {
  router.push("/camera/index");
};

const detection = (row: detectionTable) => {
  if (!row.exists) {
    nextTick(() => {
      detectionData.value = row;
      console.log(row);
    });
    index.value = tableData.value.findIndex(item => {
      return item.addx === row.addx;
    });
    detectFlag.value = true;
  }
};

const addCamera = (row: detectionTable) => {
  nextTick(() => {
    formData.value = addCameraFormData.filter(item => {
      return row.uuid === item.uuid;
    })[0];
  });
  formFlag.value = true;
};

const detectPopUpsClose = () => {
  detectFlag.value = false;
};

const getDetectionData = async data => {
  const res = await detectionCamera(data);
  if (res.code === 0) {
    tableData.value[index.value].state = "pass";
    tableData.value[index.value].detection = true;
    addCameraFormData.push({
      ...data,
      rtsp_uri: res.result.uri[0],
      rtsp_uri1: res.result.uri[1],
      rtsp_uri2: res.result.uri[2],
      device_id: res.result.mac
    });
  } else {
    tableData.value[index.value].state = "reject";
  }
};
</script>
<style scoped lang="scss">
::v-deep .el-table thead th:nth-last-child(-n + 2) {
  text-align: center;
}

::v-deep .el-table tbody td:nth-last-child(-n + 2) {
  text-align: center;
}

.detectBtn {
  width: 100px;
  height: 30px;
  margin: 0 auto;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
  border-radius: 2px;
}

.toBeTested {
  width: 80px;
  height: 30px;
  margin: 0 auto;
  line-height: 30px;
  color: #909399;
  background-color: #f4f4f5;
  border: 1px solid #e9e9eb;
  border-radius: 5px;
}

.pass {
  width: 80px;
  height: 30px;
  margin: 0 auto;
  line-height: 30px;
  color: #67c23a;
  background-color: #f0f9eb;
  border: 1px solid #e1f3d8;
  border-radius: 5px;
}

.fail {
  width: 95px;
  height: 30px;
  margin: 0 auto;
  line-height: 30px;
  color: #f56c6c;
  background-color: #fef0f0;
  border: 1px solid #fde2e2;
  border-radius: 5px;
}

.jumpBtn {
  display: flex;
  align-items: center;
  width: 55px;
  height: 15px;
  margin-right: 8px;
  cursor: pointer;
}
</style>
